<template>
  <header class="top-header">
    <img src="" alt="" class="top-header__menu-button" @click.stop="toggleSideBox">
    <router-link to="/" class="top-header__main-icon" @click.native='clearFilter'>HJM's Blog</router-link>
  </header>
</template>
<script>
import {
  mapActions,
  mapMutations
} from 'vuex'

export default {
  name: 'top-header',
  data() {
    return {}
  },
  created() {
  },
  methods: {
    ...mapActions([
      'getAllPosts'
    ]),
    ...mapMutations({
      toggleSideBox: 'TOGGLE_SIDEBOX',
      setSelectTags: 'SET_SELECT_TAGS'
    }),
    clearFilter() {
      this.setSelectTags([])
    }
  },
  computed: {
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
  @import '../../assets/stylus/_settings.styl'
  .top-header 
    position fixed
    top 0
    height 60px
    line-height @height
    width 100%
    box-shadow: 0 0 1px rgba(0,0,0,0.25);
    padding 0 40px 0 40px
    background white
    z-index 3
    &__main-icon
      text-decoration none
      color $blue
      font-weight 600
      font-size 20px
    &__menu-button
      position absolute
      left 10px
      top 50%
      width 32px
      height 32px
      margin-top -(@height/2)
      display none
  @media screen and (max-width: 850px) 
    .top-header 
      text-align center
      padding 0
      &__menu-button
        display block
</style>
